<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    label-width="100px"
    class="rule-form"
  >
    <el-form-item
      v-for="item in items"
      :label="item.label"
      :rules="item.rules"
      :prop="item.name"
      :key="item.label"
    >
      <el-input
        v-if="item.type === 'input'"
        v-model="ruleForm[item.name]"
        clearable
        v-bind="item.config"
      ></el-input>
      <el-select
        v-model="ruleForm[item.name]"
        placeholder="请选择"
        v-else-if="item.type === 'select'"
        clearable
        :multiple="item.multiple || false"
        v-bind="item.config"
      >
        <el-option
          v-for="child in selectOptions[item.name] || []"
          :key="`${child.label}-${child.value}`"
          :label="child.label"
          :value="child.value"
        >
        </el-option>
      </el-select>
      <el-switch
        active-text="启用"
        v-else-if="item.type === 'switch'"
        v-model="ruleForm[item.name]"
        clearable
        active-color="#13ce66"
        inactive-color="#ff4949"
        v-bind="item.config"
      >
      </el-switch>
      <el-radio-group
        v-model="ruleForm[item.name]"
        v-else-if="item.type === 'radio'"
        v-bind="item.config"
      >
        <div v-if="item.options">
          <el-radio
            :label="child.value"
            v-for="child in item.options"
            :key="`${child.label}-${child.value}`"
          >
            {{ child.label }}
          </el-radio>
        </div>
      </el-radio-group>
    </el-form-item>
    <el-form-item> </el-form-item>
  </el-form>
</template>

<script>
import { getSelectOptions } from '@/api/common'
export default {
  name: 'fromItmes',
  inject: ['reload'],
  props: {
    items: {
      type: Array,
      required: true,
      default: function () {
        return []
      }
    },
    ruleForm: {
      type: Object,
      required: true,
      default: {}
    }
  },
  data() {
    return {
      selectOptions: {}
    }
  },
  created() {
    // 初始化暴露form，便于校验
    this.$nextTick(() => {
      this.$emit('reference', this.$refs.ruleForm)
    })
    // 查询是否需要异步加载
    this.items.forEach((item) => {
      if (item.type === 'select') {
        this.getSelectOptions(item)
      } else {
        return
      }
    })
  },
  methods: {
    async getSelectOptions(item) {
      if (item.options && Array.isArray(item.options) && item.url) {
        const { data } = await getSelectOptions()
        this.$set(this.selectOptions, [item.name], [...item.options, ...data])
      } else if (item.options && Array.isArray(item.options)) {
        this.$set(this.selectOptions, [item.name], item.options)
      } else if (item.url) {
        const { data } = await getSelectOptions(item.params || {})
        this.$set(this.selectOptions, [item.name], data)
      } else {
        this.$set(this.selectOptions, [item.name], [])
      }
    }
  }
}
</script>

<style></style>
<style lang="less" scoped>
.rule-form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
:deep( .el-form-item ) {
  width: 90%;
}
:deep( .el-select ) {
  width: 100%;
}
</style>
